<template>
  <div>
    <div style="height: 100px;padding:10px;border:2px solid green;width: 200px;overflow-y: scroll;" ref="mybox" id="mybox" @scroll="scrollFun">
      <div>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {}
    },
    mounted() {
          this.scrollFun();
    },
    methods: {
      scrollFun(){
        console.log('-----')
        console.log('clientHeight',  this.$refs.mybox.clientHeight);
        console.log('scrollHeight',  this.$refs.mybox.scrollHeight);
        console.log('offsetHeight',  this.$refs.mybox.offsetHeight);
        console.log('height ',  this.$refs.mybox.height);
        console.log('style.height ',  this.$refs.mybox.style.height);
        console.log('clientTop ',  this.$refs.mybox.clientTop);
        console.log('scrollTop ',  this.$refs.mybox.scrollTop);
        console.log('offsetTop ',  this.$refs.mybox.offsetTop);
      }
    }
  };
</script>
<style>
  p {
    margin: 0px;
    height: 20px;
  }
</style>
